<nz-drawer
        [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'hidden', padding: '0px'}"
        [nzClosable]="true"
        [nzVisible]="visible"
        [nzWidth]="'800px'"
        nzPlacement="right"
        [nzTitle]="'要素详情'"
        (nzOnClose)="close()"
>
    <form #editorForm="ngForm" *nzDrawerContent style="height: 100%; box-shadow: none; padding: 20px;">
        <div class="panel panel-grid" *ngIf="clone" style="height: 100%;">
            <div class="panel-body" style="display: grid; grid-gap: 10px; grid-auto-flow: row; grid-auto-rows: min-content; grid-template-columns: 1fr 1fr; ">
                <ng-container *ngFor="let property of properties">
                    <nz-form-item *ngIf="property.editor == 'String'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                           <input nz-input [name]="property.key" [(ngModel)]="clone[property.key]"  [disabled]="!editable" autocomplete="off">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Number'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                           <input nz-input type="number" [name]="property.key" [(ngModel)]="clone[property.key]"  [disabled]="!editable" autocomplete="off">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Color'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                           <input nz-input type="color" [name]="property.key" [(ngModel)]="clone[property.key]"  [disabled]="!editable" autocomplete="off">
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Date'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-date-picker [nzFormat]="'yyyy/MM/dd'" [name]="property.key" [(ngModel)]="clone[property.key]" [nzDisabled]="!editable"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Boolean'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-select [name]="property.key" [(ngModel)]="clone[property.key]" [disabled]="!editable">
                                <nz-option [nzLabel]="'true'" [nzValue]="true"></nz-option>
                                <nz-option [nzLabel]="'false'" [nzValue]="false"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Memo'" style="grid-column: 1 / span 2; display: grid; grid-template-rows: auto 1fr; grid-gap: 0px;">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <textarea nz-input [name]="property.key" [(ngModel)]="clone[property.key]"  [disabled]="!editable" rows="3"></textarea>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Enum'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-select [name]="property.key" [(ngModel)]="clone[property.key]" [disabled]="!editable">
                                <nz-option *ngFor="let option of property.enums" [nzLabel]="option.key" [nzValue]="option.value">
                                </nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item *ngIf="property.editor == 'Element'">
                        <nz-form-label [nzSpan]="6">{{property.alias}}</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-input-group [nzAddOnAfter]="suffixIconButton">
                                <input type="text" nz-input [ngModel]="clone[property.key]" readonly/>
                            </nz-input-group>
                            <ng-template #suffixIconButton>
                                <button nz-button nzType="primary" (click)="editable ? editor.edit(clone[property.key]) : editor.show(clone[property.key])"><i nz-icon nzType="select"></i></button>
                            </ng-template>
                        </nz-form-control>
                        <app-element-editor #editor></app-element-editor>
                    </nz-form-item>
                    
                    <div class="table-container" *ngIf="property.editor == 'Table'" style="grid-column: 1 / span 2; display: grid; grid-template-rows: auto 1fr; grid-gap: 0px;">
                        <div class="table-container-header">
                            <span class="table-title">{{property.alias}}</span>
                            <button *ngIf="editable" nz-button nzType="primary" (click)="editor.create(property.children)"><i nz-icon nzType="plus-square"></i>添加</button>
                        </div>
                        <div class="table-container-body">
                            <nz-table #dataTable [nzFrontPagination]="true"
                                      [nzData]="clone[property.key]" [nzShowPagination]="true" [nzPageSize]="10" nzHideOnSinglePage>
                                <thead>
                                <tr class="table-header">
                                    <th class="text-center" style="width: 80px;">#</th>
                                    <ng-container *ngFor="let meta of property.columns">
                                        <th class="text-center" style="width: auto;">{{meta.alias}}</th>
                                    </ng-container>
                                    <th class="text-center" style="width: 80px;">操作</th>
                                </tr>
                                </thead>
                                <tbody class="table-body">
                                <tr class="table-row-hover" *ngFor="let item of dataTable.data; let i = index">
                                    <td class="text-center table-item">{{(dataTable.nzPageIndex - 1) * dataTable.nzPageSize + i + 1}}</td>
                                    <ng-container *ngFor="let meta of property.columns">
                                        <td class="text-center table-item">{{item[meta.key]}}</td>
                                    </ng-container>
                                    <td>
                                        <div class="table-row-actions">
                                            <button nz-button nzType="default" nz-tooltip nzTitle="查看" (click)="editor.show(item)">
                                                <i nz-icon nzType="eye"></i>
                                            </button>
                                            <button *ngIf="editable" nz-button nzType="default" nz-tooltip nzTitle="编辑" (click)="editor.edit(item)">
                                                <i nz-icon nzType="edit"></i>
                                            </button>
                                            <button *ngIf="editable" nz-button nzType="default" nz-tooltip nzTitle="删除" (click)="removeChild(property, dataTable.nzPageSize * (dataTable.nzPageIndex-1) + i )">
                                                <i nz-icon nzType="delete"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </nz-table>
                        </div>
                        <app-element-editor #editor (onCreate)="addChild($event, property)" (onEdit)="updateChild(property)"></app-element-editor>
                    </div>
                </ng-container>
            </div>
            <div class="panel-footer" *ngIf="editable">
                <div class="panel-footer-right">
                    <button nz-button nzType="default" (click)="close()">取消</button>
                    <button nz-button nzType="primary" (click)="save()" [disabled]="!editorForm.form.valid">保存</button>
                </div>
            </div>
        </div>
    </form>
</nz-drawer>



